<script setup lang="ts">
import { Button, Card, CardMeta, TypographyText } from "ant-design-vue";
import { UserOutlined } from "@ant-design/icons-vue";

const props = defineProps({
  agentImage: String,
  courseTitle: String,
  courseAuthor: String,
  url: String,
})

const gotoVideo = () => {
  // console.log(`gotoVideo url: ${props.url}`)
  window.open(props.url, '_blank')
}
</script>

<template>
  <Card hoverable class="h-full">
    <div class="flex flex-col gap-5 h-full">
      <img
        :src="agentImage"
        :alt="courseTitle"
        class="w-full h-36 object-cover rounded-t-lg"
      >
      <div class="flex flex-col flex-1 justify-between">
        <CardMeta :title="courseTitle" class="mb-2.5" />
        <div class="flex justify-between items-center">
          <TypographyText type="secondary" class="flex items-center">
            <UserOutlined class="mr-1" />
            {{ courseAuthor }}
          </TypographyText>
          <Button
            type="default"
            size="small"
            class="secondary-btn"
            style="font-size: 14px;border: none;"
            @click="gotoVideo"
          >
            开始学习
          </Button>
        </div>
      </div>
    </div>
  </Card>
</template>

<style scoped lang="scss">
@use '@/style/custom-theme.scss' as *;

.secondary-btn {
  color: $button-secondary-text-color !important;
  background-color: $button-secondary-bg !important;
}
</style>
